
//请求品牌大全的品牌列表数据
ajax({
    url: "http://chst.vip:1234/api/getbrandtitle",
    
}).then(res=>{
    let resArr = res.result;
    // console.log(resArr);
    let ulbox = document.querySelector(".ulbox")
    // console.log(ulbox);
    let html = ""
     //对品牌列表进行数据渲染
    resArr.forEach(item => {
        html += `<li class="libox">
        <div class="top">
            <a class="aTop">
                <span>${item.brandTitle}</span>
                <svg style="height:16px;width:16px;position:absolute;right:15px;top:10px" class="icon" aria-hidden="true">
                 <use xlink:href="#icon-xialajiantou"></use>
                </svg>
            </a>
        </div>
        <div class="bottom">
            <ul>
                <li>
                    <a>
                        <span>0</span>
                        <h4>格力变频空调</h4>
                    </a>
                    <p>30天全网销售：684702件</p>
                </li> 
            </ul>
        </div>
    </li>`
    });
    ulbox.innerHTML = html;

    let lis = document.querySelectorAll(".libox");
    let aArr = document.querySelectorAll(".aTop");
    let divArr = document.querySelectorAll(".bottom");
    // console.log(lis);
    let flag = false;
    let index = 0;
    for (let i = 0; i < lis.length; i++) {
        aArr[i].index = i;
        //给页面的a标签添加点击事件
        aArr[i].onclick = function () {

            let _this = this;
            // console.log(index);
            //点击之后进行下拉列表的数据请求
            ajax({
                url: "http://chst.vip:1234/api/getbrand",
                data: { brandtitleid: this.index },

            }).then(res=>{
                    console.log(res);
                    // console.log(res.pagesize);
                    let resArr2 = res.result;
                    // console.log(resArr2.brandtitleid)
                    let html = '';
                    let count=0;
                    resArr2.forEach(item => {
                        //给每条数据添加index，商品序号用index数据渲染
                        item.index=count;
                        
                        html += `<ul>
                       <li>
                           <a href=./brand.html?title=${item.brandName}&brandTitleId=${item.brandTitleId}>
                               <span class="bottom-span">${item.index}</span>
                               <h4>${item.brandName}</h4>
                           </a>
                           <p>${item.brandInfo}</p>
                       </li> 
                   </ul>`
                        
                        count++;
                    })
                    divArr[_this.index].innerHTML = html;
                   
                })

            //利用开关flag实现自切换
            for (let j = 0; j < aArr.length; j++) {
                aArr[j].style.color = 'black';
                divArr[j].style.height = 0;
            }
            if (index === i) {
                if (flag) {
                    aArr[i].style.color = 'black';
                    divArr[i].style.height = 0;
                    flag = false;
                } else {
                    this.style.color = "#333";
                    divArr[this.index].style.height=750+'px';
                    flag = true;
                }
                index = i;
            } else {
                flag = true;
                if (flag) {
                    this.style.color = "#333";
                    divArr[this.index].style.height=750+'px';
                } else {
                    aArr[i].style.color = 'black';
                    divArr[i].style.height = 0;
                }
                index = i;
            }
        }
    }
})
    
   


